<template>
    <div class="Zky_Loading" v-if="prop.hidden">
        <div class="Zky_LoadingBox">
            <svg class="circular" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
            </svg>
            <div class="FontSize_text">数据加载中...</div>
            <!-- <input type="range"> -->
            <div class="step" ref="stepDom" v-if="false">
                <div class="stepChildren"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue"
import Popup from "../Popup";
const SetpWidth = ref("0px")  // 控制进度条显示宽度
const SetpMainWidth = ref(0) // 当前需要显示的宽度
const stepDom = ref() // 进度条父组件Dom元素
const timer = ref() // 自定义一个定时器

const prop = defineProps({
    hidden: {
        //控制弹窗显示
        type: Boolean,
        default: false
    },
    Max: {
        //显示进度条最大值
        type: Number,
        default: 10,
    },
    step: {  // 步长值
        type: Number,
        default: 0,
    }
})
watch([() => prop.hidden, () => prop.Max, () => prop.step], () => {
    if (prop.hidden) {
        timer.value ? clearInterval(timer.value) : ""
        timer.value = setInterval(() => {
            if (stepDom.value) {
                clearInterval(timer.value)
                ChangeWidth()
            }
        }, 1000)
    }
})
// 实时修改进度条位置
const ChangeWidth = () => {
    // 如果传递的最大值不是整数且小于1报错
    // 如果传递的步长值不是整数
    let MaxPattren = /^[1-9]\d*$/
    let StepPattren = /^[0-9]*$/
    if (!MaxPattren.test(prop.Max.toString())) {
        throw new Error("Max属性(进度条显示长度)最大值不能是整数且必须大于0")
    }
    if (!StepPattren.test(prop.step.toString())) {
        throw new Error("step属性(进度条当前位置)步长值不能是整数且必须大于0")
    }
    // 步长值不能大于最大值
    if (prop.step > prop.Max) {
        throw new Error("step属性不能大于Max属性")
    }
    // 获取父组件的宽度/最大值。计算每一份占用大小
    let width = stepDom.value.clientWidth / prop.Max
    //求取当前位置
    SetpMainWidth.value = width * prop.step
    // 将需要显示的宽度赋值给实际进度条宽度
    SetpWidth.value = `${SetpMainWidth.value}px`

    //如果进度条需要显示宽度超过父组件的宽度，将修改为父组件的宽度
    // SetpMainWidth.value > width ? SetpMainWidth.value = width : "不做处理"
    // 如果进度条需要显示宽度为负数
    // 处理负数方法一: 强制为0
    // SetpMainWidth.value < 0 ? SetpMainWidth.value = 0 : "不做处理"
    // 处理方法二: 报错
    // if (SetpMainWidth.value < 0) {
    //     throw new Error("SetpMainWidth属性(进度条显示长度)不能为负数")
    // }

}
// onMounted(() => {
//     console.log(prop.hidden);

//     // ChangeWidth()
// })



</script>

<style scoped lang="scss">
.step {
    display: inline-block;
    background: #fff;
    width: 50%;
    height: 10px;
    border-radius: 6px;
    --stepChildren_width: v-bind(SetpWidth);
    overflow: hidden;

    .stepChildren {
        width: var(--stepChildren_width);
        height: 100%;
        background: red;
        border-radius: 6px;
        box-sizing: border-box;
    }
}


.Zky_Loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;

    .Zky_LoadingBox {
        text-align: center;
        width: 50%;
    }

    .circular {
        display: inline-block;
        width: 20%;

        .path {
            animation: loading-dash 1.5s ease-in-out infinite;
            stroke-dasharray: 10, 150;
            stroke-dashoffset: 0;
            stroke-width: 1;
            stroke: #409eff;
            stroke-linecap: round;
        }


    }



    @keyframes loading-rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40px;
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120px;
        }
    }
}
</style>